<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">按钮</button>
<div class="box red blue">box</div>

<script>
// classList对象
// 每一个DOM节点都有一个classList属性，值为一个对象
// classList对象主要用于操作DOM节点的类名

var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
console.log( btn.classList );
console.log( box.classList );

// console.log( box.classList.length );// 3 表示类名个数
// console.log( box.classList.value );// 'box red blue' 元素的所有类名

// item(index)返回指定索引位置的类名
// console.log( box.classList.item(0) );// 'box'
// console.log( box.classList.item(1) );// 'red'
// console.log( box.classList.item(2) );// 'blue'

// box.className = 'box red blue green';// 重新赋值添加一个类名
// box.className = 'box red';// 重新赋值删除一个类名

// box.classList.add('green');// 添加一个类名
// box.classList.remove('blue');// 删除一个类名

// box.className -> 'box red blue'
// console.log( box.classList.contains('blue') );// 判断是否有某个类名

btn.onclick = function (){
    // 反转/开关/切换类名(有则删除，无则添加)
    box.classList.toggle('blue');
}

</script>
</body>
</html>